<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问诊记录管理 - 小菊问诊系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.8.0/dist/css/layui.css">
    <script src="https://cdn.jsdelivr.net/npm/layui@2.8.0/dist/layui.js"></script>
    <style>
        body {
            background-color: #f2f2f2;
            font-family: "Microsoft YaHei", sans-serif;
        }

        .layui-card {
            margin-bottom: 15px;
            border-radius: 4px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }

        .layui-card-header {
            font-weight: bold;
            padding: 15px;
            border-bottom: 1px solid #eee;
        }

        .message-container {
            max-height: 500px;
            overflow-y: auto;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 4px;
        }

        .message-item {
            margin-bottom: 15px;
            display: flex;
        }

        .message-user {
            justify-content: flex-end;
        }

        .message-ai {
            justify-content: flex-start;
        }

        .message-content {
            max-width: 70%;
            padding: 10px 15px;
            border-radius: 4px;
            word-wrap: break-word;
        }

        .message-user .message-content {
            background-color: #009688;
            color: white;
        }

        .message-ai .message-content {
            background-color: white;
            border: 1px solid #eaeaea;
        }

        .message-time {
            font-size: 12px;
            color: #999;
            margin: 5px 0 0 5px;
            align-self: flex-end;
        }

        .search-form {
            margin-bottom: 15px;
        }

        .status-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
        }

        .status-active {
            background-color: #5FB878;
            color: white;
        }

        .status-closed {
            background-color: #FF5722;
            color: white;
        }

        /* 修改激活菜单按钮颜色 */
        .layui-nav-tree .layui-this > a,
        .layui-nav-tree .layui-nav-child .layui-this > a {
            background-color: rgb(46 125 50 / 90%) !important;
            color: white !important;
        }

        .layui-nav-tree .layui-this > a:hover {
            background-color: rgb(46 125 50 / 95%) !important;
        }

        /* 修改标题样式 */
        .layui-logo {
            font-weight: bold;
            color: white !important;
            font-size: 20px;
        }

        /* 修改按钮样式 */
        .layui-btn {
            font-weight: bold;
            color: white !important;
        }

        /* 修改导航栏右侧文字样式 */
        .layui-layout-right .layui-nav-item > a {
            font-weight: bold;
            color: white !important;
        }
    </style>
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <!-- 头部区域 -->
        <div class="layui-header">
            <div class="layui-logo">小菊问诊系统</div>
            <div class="layui-layout-right">
                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item">
                        <a href="javascript:;">
                            <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" class="layui-nav-img">
                            <span id="admin-username">管理员</span>
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" id="logout">退出登录</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 侧边栏 -->
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item">
                        <a href="/admin/">仪表盘</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">用户管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="/admin/users">用户列表</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">AI 管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="/admin/suppliers">供应商管理</a></dd>
                            <dd><a href="/admin/roles">角色管理</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item layui-this">
                        <a href="javascript:;">问诊记录</a>
                        <dl class="layui-nav-child">
                            <dd class="layui-this"><a href="/admin/consultations">问诊列表</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="layui-body">
            <div style="padding: 15px;">
                <div class="layui-card">
                    <div class="layui-card-header">问诊记录管理</div>
                    <div class="layui-card-body">
                        <!-- 搜索表单 -->
                        <form class="layui-form search-form" lay-filter="searchForm">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">用户名</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">会话标题</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="title" placeholder="请输入会话标题" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn" lay-submit lay-filter="search">
                                        <i class="layui-icon">&#xe615;</i> 搜索
                                    </button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </form>

                        <!-- 数据表格 -->
                        <table class="layui-hide" id="consultationTable" lay-filter="consultationTable"></table>

                        <!-- 操作栏模板 -->
                        <script type="text/html" id="consultationBar">
                            <a class="layui-btn layui-btn-xs" lay-event="view">查看详情</a>
                        </script>

                        <!-- 状态模板 -->
                        <script type="text/html" id="statusTpl">
                            {{#  if(d.status === 'active'){ }}
                            <span class="status-badge status-active">进行中</span>
                            {{#  } else { }}
                            <span class="status-badge status-closed">已结束</span>
                            {{#  } }}
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 会话详情弹窗 -->
    <div id="consultationDetailModal" style="display: none;">
        <div class="layui-card">
            <div class="layui-card-header">
                <h3 id="detail-title" style="margin: 0;"></h3>
                <div style="margin-top: 5px; font-size: 14px; color: #666;">
                    <span id="detail-user"></span> |
                    <span id="detail-role"></span> |
                    <span id="detail-time"></span>
                </div>
            </div>
            <div class="layui-card-body">
                <div id="messageList" class="message-container">
                    <!-- 消息列表将在这里动态生成 -->
                </div>
            </div>
        </div>
    </div>

    <script>
        layui.use(['jquery', 'layer', 'table', 'form'], function() {
            var $ = layui.jquery;
            var layer = layui.layer;
            var table = layui.table;
            var form = layui.form;

            // 退出登录
            $('#logout').click(function() {
                layer.confirm('确定要退出登录吗？', function(index) {
                    $.ajax({
                        url: '/auth/logout',
                        type: 'POST',
                        success: function(res) {
                            if (res.code === 200) {
                                layer.msg('退出成功', {time: 1000}, function() {
                                    window.location.href = '/auth/login';
                                });
                            } else {
                                layer.msg(res.message || '退出失败');
                            }
                        },
                        error: function() {
                            layer.msg('网络错误');
                        }
                    });
                    layer.close(index);
                });
            });

            // 获取用户名
            $.ajax({
                url: '/api/user/info',
                type: 'GET',
                success: function(res) {
                    if (res.code === 200) {
                        $('#admin-username').text(res.data.username || '管理员');
                    }
                }
            });

            // 表格渲染
            var consultationTable = table.render({
                elem: '#consultationTable',
                url: '/admin/api/consultations',
                method: 'GET',
                page: true,
                limit: 10,
                limits: [10, 20, 50],
                cols: [[
                    {type: 'checkbox'},
                    {field: 'id', title: 'ID', width: 120},
                    {field: 'username', title: '用户名', width: 100},
                    {field: 'title', title: '会话标题', minWidth: 180},
                    {field: 'role_name', title: 'AI角色', width: 100},
                    {field: 'status', title: '状态', width: 80, templet: '#statusTpl'},
                    {field: 'created_at', title: '创建时间', minWidth: 160},
                    {field: 'updated_at', title: '更新时间', minWidth: 160},
                    {fixed: 'right', title: '操作', toolbar: '#consultationBar', width: 80}
                ]],
                response: {
                    statusName: 'code',
                    statusCode: 200,
                    msgName: 'message',
                    countName: 'data.total',
                    dataName: 'data.items'
                }
            });

            // 搜索
            form.on('submit(search)', function(data) {
                consultationTable.reload({
                    where: {
                        username: data.field.username,
                        title: data.field.title
                    },
                    page: {
                        curr: 1
                    }
                });
                return false;
            });

            // 监听表格工具事件
            table.on('tool(consultationTable)', function(obj) {
                var data = obj.data;

                // 查看详情
                if (obj.event === 'view') {
                    // 填充基本信息
                    $('#detail-title').text(data.title);
                    $('#detail-user').text(data.username);
                    $('#detail-role').text(data.role_name);
                    $('#detail-time').text(data.created_at);

                    // 获取消息列表
                    $.ajax({
                        url: '/admin/api/consultations/' + data.id + '/messages',
                        type: 'GET',
                        beforeSend: function() {
                            $('#messageList').html('<div style="text-align: center; padding: 20px;">加载中...</div>');
                        },
                        success: function(res) {
                            if (res.code === 200) {
                                var messages = res.data;
                                var html = '';

                                messages.forEach(function(msg) {
                                    var roleClass = msg.role === 'user' ? 'message-user' : 'message-ai';
                                    var roleText = msg.role === 'user' ? '用户' : 'AI';

                                    html += '<div class="message-item ' + roleClass + '">';
                                    html += '<div class="message-content">' + msg.content + '</div>';
                                    html += '<span class="message-time">' + msg.timestamp + '</span>';
                                    html += '</div>';
                                });

                                $('#messageList').html(html || '<div style="text-align: center; padding: 20px; color: #999;">暂无消息记录</div>');
                            } else {
                                $('#messageList').html('<div style="text-align: center; padding: 20px; color: #ff4d4f;">加载失败：' + (res.message || '未知错误') + '</div>');
                            }
                        },
                        error: function() {
                            $('#messageList').html('<div style="text-align: center; padding: 20px; color: #ff4d4f;">网络错误，无法加载消息</div>');
                        }
                    });

                    // 打开详情弹窗
                    layer.open({
                        type: 1,
                        title: '问诊详情',
                        content: $('#consultationDetailModal'),
                        area: ['800px', '600px'],
                        btn: ['关闭'],
                        success: function(layero, index) {
                            // 可以在这里添加额外的初始化逻辑
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>
